{% extends 'extends/nav_front_all_.html' %}

{% block main %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-12">
            <h1>{{ title }}</h1>

            <div id="posts-container"></div>
            <div class="text-center mt-3" id="load-more-container">
                <button id="load-more-button" class="btn btn-primary">加载更多</button>
            </div>

        </div>
    </div>
</div>

<script>
    onUrlsReady(urls=>{

        async function loadData(url,param) {
            await Fetch(url, 'get',param, res => {
                if (res.status === 'success') {
                    res.data.blogs.forEach(post => {
                        Element_('posts-container').innerHTML +=
                            front_blog_card(
                                post_url = urls.page.front.blogdetail.replace('0',post.pid),
                                icon_url = post.author_icon_url,
                                title = post.title,
                                username = post.author,
                                datetime = post.time,
                                like = post.get_likes,
                                sort = post.sort
                            )
                    })

                    if (res.data.offset === param.offset)
                    {
                        Element_('load-more-container').innerHTML = '<span class="text-muted">没有更多内容了</span>'
                    }

                    param.offset = res.data.offset
                }
            })
        }


        let param={{ param|tojson }}
        let url='{{ url }}'
        loadData(url,param)

        Event_('load-more-button','click',event=>{
            loadData(url,param)
        })
    })
</script>
{% endblock %}
